<template>
  <!--切换弹窗-->
  <van-action-sheet v-model:show="show" title="切换就诊人">
    <div>
      <p style="text-align: left;margin-left: 10px;font-weight: bold;">就诊卡</p>
      <van-radio-group v-model="checked">
        <van-cell-group inset>
          <template v-for="card in patientCard" :key="card.patientId">
            <van-cell class="patientCardContainer" clickable @click="handleCardSelection(card.patientId, card)">
              <template #title>
                <p class="card-title-text">{{ card.pname }}</p>
              </template>
              <template #right-icon>
                <van-radio :name="card.patientId"/>
              </template>
              <template #label>
                <p class="card-label-text">南昌大学第二附属医院</p>
                <p class="card-label-text">{{ card.idCardNumber }}</p>
              </template>
            </van-cell>

          </template>
        </van-cell-group>
      </van-radio-group>
    </div>
  </van-action-sheet>
  <div class="page-container" v-if="isDataLoaded">
    <div style="margin-top: 20px">
      <van-cell-group inset>
        <van-cell center="center" size="large" class="doctorCardContainer">
          <template #icon>
            <img v-bind:src="require('@/assets/images/doctor.png')" alt="医生图片"
                 style="max-width: 90%; max-height: 90%;border-radius: 50%;margin-right: 20px">
          </template>
          <template #title>
            <p class="title-text">{{ appointment.doctorName }}</p>
          </template>
          <template #label>
            <p class="label-text">{{ appointment.doctorLabel }}</p>
            <p class="label-text">南昌大学第二附属医院</p>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div style="margin-top: 20px">
      <van-cell-group inset class="patientCardContainer" @click="popEvents">
        <van-cell center="center" size="large" value="切换就诊人" is-link style="font-size:1.2em">
          <template #title>
            <p style="text-align: left;line-height: 0;font-weight: bold;font-size: 1.2em">
              {{ selectedPatient.pname }}</p>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div style="margin-top: 20px">
      <van-cell-group inset class="informationCardContainer">
        <van-cell center="center" size="large" v-bind:value="appointment.appointmentData"
                  style="--van-cell-value-color:rgb(79,156,245);font-size:1.2em">
          <template #title>
            <p style="text-align: left;line-height: 0;font-size: 1.1em">就诊日期</p>
          </template>
        </van-cell>
        <van-cell center="center" size="large" v-bind:value="appointment.appointmentTime"
                  style="--van-cell-value-color:rgb(79,156,245);font-size:1.2em">
          <template #title>
            <p style="text-align: left;line-height: 0;font-size: 1.1em">就诊时间</p>
          </template>
        </van-cell>
        <van-cell center="center" size="large" v-bind:value="selectedPatient.idCardNumber"
                  style="font-size:1.01em">
          <template #title>
            <p style="text-align: left;line-height: 0;font-size: 1.1em">证件号</p>
          </template>
        </van-cell>
        <van-cell center="center" size="large" v-bind:value="selectedPatient.telNumber"
                  style="font-size:1.2em">
          <template #title>
            <p style="text-align: left;line-height: 0; font-size: 1.1em">手机</p>
          </template>
        </van-cell>
        <van-cell center="center" size="large">
          <template #title>
            <p style="text-align: left;line-height: 0; font-size: 1.1em">医事服务费</p>
          </template>
          <template #value>
            <p style="text-align: right;line-height: 0;font-weight: bold;color:rgb(240,167,50);
            font-size:1.4em">
              {{ appointment.serviceFee }}</p>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div style="margin-top: 20px">
      <van-highlight :keywords="registration" :source-string="readText" style="font-size: 1.2em;"
                     @click="showBottom = true"/>
    </div>
    <van-button type="primary" class="bottom-button" @click="handleClick">立即预约</van-button>
  </div>
  <!-- 底部弹出 -->
  <van-popup
      v-model:show="showBottom"
      position="bottom"
      round
      closeable
      :style="{ height: '80%' }"
  >
    <p style="font-size: 1.2em;color: black">预约挂号须知</p>
    <p style="font-size: 1.2em;color: dodgerblue;text-align: left;margin-left: 10px; font-weight: bold;">就诊说明：</p>
    <p style="font-size: 1.2em;color: black;text-align: left;margin-left: 10px;line-height: 1.5;"> 1、看诊当日，请您在预约时段之前到现场就诊；</p>
    <p style="font-size: 1.2em;color: black;text-align: left;margin-left: 10px;line-height: 1.5;">2、在预约时段30分钟内未来就诊者，视为过号，若需就诊，请到导诊台，由分诊护士安排重新取号；</p>
    <p style="font-size: 1.2em;color: black;text-align: left;margin-left: 10px;line-height: 1.5;">3、当日未来就诊者，视为爽约，爽约三次，将列入预约诊疗黑名单，12个月内无法预约挂号。</p>
    <p style="font-size: 1.2em;color: dodgerblue;text-align: left;margin-left: 10px; font-weight: bold;">退号说明：</p>
    <p style="font-size: 1.2em;color: black;text-align: left;margin-left: 10px;line-height: 1.5;">
      1、网站当日挂号成功后，如不能按时就诊，可在【我的】-【我的挂号】进行线上退号。注：当日挂号就诊后不可退号，未就诊前可在中午12:00前进行线上退费，如其他原因导致线上退号失败，请咨询线下窗口服务人员。
    </p>
    <p style="font-size: 1.2em;color: black;text-align: left;margin-left: 10px;line-height: 1.5;">
      2、预约次日挂号，未在医院自助机取号，未就诊前可在中午12:00前进行线上退费，如：就诊当日取号后，线上超过中午12:00不可退号，需要到医院线下窗口办理退号、退费。
    </p>
  </van-popup>
</template>

<script setup>
//通过get请求（URL地址参数拼接）去调后台接口，并打印响应信息
// this.axios.get('https://api.apiopen.top/getJoke?page=1&count=2&type=video').then(res=>{   //这里使用箭头函数的形式
//   console.log(res,"响应信息")
// })
import {onBeforeMount, ref} from 'vue';
import {AppointmentService, PatientService, RegistrationPoolService} from '@/api/api';
import {showToast} from "vant";
import router from "@/router";
const isDataLoaded = ref(false);
const poolListId = ref();
const readText = '请您仔细阅读《预约挂号须知》';
const registration = '《预约挂号须知》';
let patientCard = ref([
  {
    patientId: "-1",
    pname: "未获取数据"
  }
]); // 存储病人数据的响应式数组

const appointment = ref({
  appointmentData: "2023-11-30",
  appointmentTime: '09:00~09:30',
  serviceFee: '￥100.00',
  doctorName: '李超',
  doctorLabel: '心内主任医师 心内科门诊(南区)'
});

const selectedPatient = ref(
    {
      pname: "未获取数据",
      telNumber: "未获取数据",
      idCardNumber: "未获取数据"
    }
);// 选中的病人

onBeforeMount(async () => {
  poolListId.value = history.state.poolListId;
  console.log(poolListId.value);
  await loadData(poolListId.value); // 在页面加载完成后调用加载数据的方法
});

async function loadData(poolListId) {
  try {
    const loginId = '1'; // 替换为实际的 loginId 值
    const response1 = await PatientService.patientList(loginId);
    // 获取响应数据
    selectedPatient.value = response1.data[0]; // 将响应数据存储在 patientCard 变量中
    checked.value = response1.data[0].patientId;
    const response2 = await RegistrationPoolService.getDoctorInfo(poolListId);
    appointment.value = response2.data;
    isDataLoaded.value = true;
    // console.log(selectedPatient.value); // 输出结果
  } catch (error) {
    console.error(error); // 处理错误
  }
}

const handleCardSelection = (patientId, patientCard) => {
  checked.value = patientId;
  selectedPatient.value = patientCard;
};

const handleClick = async () => {
  const appointmentData = {
    patientId: checked.value,
    price: appointment.value.serviceFee.substring(1),
    poolListId: poolListId.value
  };
  console.log(appointmentData);
  // 调用后端API接口发送保存数据的请求
  const response = await AppointmentService.saveAppointment(appointmentData);
  console.log(response);
  if(response.data === -1)
    showToast('锁号失败');
  else{
    showToast('锁号成功，请进行支付');
    try {
      const data = {
        appointmentId: response.data
      };

      await router.push({
        path: '/AppointmentDetail',
        state: data
      });
    } catch (error) {
      console.error(error);
    }
  }
};

const popEvents = async () => {
  console.log(checked.value);
  try {
    const loginId = '1'; // 替换为实际的 loginId 值
    const response = await PatientService.patientList(loginId);
    // 获取响应数据
    patientCard = response.data; // 将响应数据存储在 patientCard 变量中
    // console.log(response.data); // 输出结果
    show.value = true;
  } catch (error) {
    console.error(error); // 处理错误
  }
};

const show = ref(false);
const showBottom = ref(false);

const checked = ref();
</script>

<style scoped>
.doctorCardContainer {
  height: 100px;
}

.patientCardContainer {
  --van-cell-value-color: rgb(79, 156, 245);
}

.informationCardContainer {
  --van-cell-font-size: 14px;
}

.label-text {
  text-align: left;
  line-height: 0.8;
}

.title-text {
  text-align: left;
  line-height: 0.8;
  font-weight: bold;
}

.page-container {
  position: relative;
  min-height: 80vh; /* 设置最小高度以确保按钮在页面底部 */
}

.bottom-button {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 20px; /* 可根据需要调整按钮与页面边缘的距离 */
}

.card-title-text {
  text-align: left;
  line-height: 0.8;
  font-weight: bold;
  font-size: 1.5em;
}

.card-label-text {
  text-align: left;
  line-height: 0.8;
  color: white;
  font-size: 1.2em;
}

.patientCardContainer {
  background-image: url('~@/assets/images/patientCard.png'); /* 图片路径 */
  background-size: cover;
  margin-bottom: 10px;
}
</style>